<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="选择图表类型">
        <el-select v-model="form.region" placeholder="请选择你想查看的图表">
          <el-option label="area" value="area" />
          <el-option label="bar" value="bar" />
          <el-option label="column" value="column" />
          <el-option label="dual-axes" value="dual_axes" />
          <el-option label="gauge" value="gauge" />
          <el-option label="line" value="line" />
          <el-option label="liquid" value="liquid" />
          <el-option label="pie" value="pie" />
          <el-option label="scatter" value="scatter" />
        </el-select>
        <el-button type="primary" @click="onSubmit">切换</el-button>
      </el-form-item>

      <el-form-item> </el-form-item>
    </el-form>
    <!-- <div class="dashboard-text">: {{ name }}</div> -->
    <div>
      <iframe
        class="iframe"
        id="IframeHTMLInfo"
        :srcdoc="form.srcdoc"
        :src="form.iframe_url"
        frameborder="0"
        style="transform-origin: 0 0"
        width="95%"
        height="720px"
      />
    </div>

    <vue-json-editor
      v-model="resultInfo"
      :showBtns="false"
      :mode="'code'"
      lang="zh"
      :style="{ height: height + 'px !important' }"
      @json-change="onJsonChange"
      @json-save="onJsonSave"
      @has-error="onError"
    />
    <br />
    <el-button type="primary" @click="checkJson">检查JSON数据</el-button>
    <el-button type="primary" @click="fetchData">查看当前图表参数</el-button>
    <el-button type="primary" @click="fetchHtml">用我的参数绘制</el-button>
  </div>
</template>

<script>
// 导入模块
import { mapGetters } from "vuex";
import vueJsonEditor from "vue-json-editor";
import { chart_json_params } from "@/api/chart_json";
import { chart_json_html } from "@/api/chart_json";
import {getInfo} from "@/api/user";
// import VueCookies from 'vue-cookies'

export default {
  // 注册组件
  components: { vueJsonEditor },
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      form: {
        region: "column",
        method: "render_html",
        iframe_url:
          "http://127.0.0.1:5000/chartIframe?plot_type=column&method=render_html",
        srcdoc: "",
      },
      hasJsonFlag: true, // json是否验证通过
      // json数据
      resultInfo: {
        employees: [
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "Bill",
            lastName: "Gates",
          },
          {
            firstName: "George",
            lastName: "Bush",
          },
          {
            firstName: "Thomas",
            lastName: "Carter",
          },
        ],
      },
    };
  },
  created() {
    this.fetchData();
    this.onSubmit();
    // this.fetchHtml()
  },

  methods: {
    onSubmit() {
      // token 验证
      var self = this;
      var key = encodeURIComponent('/auth/info')
      var token = this.getCookie(key)
      getInfo(token).then(
        (response) => {
        }
      )
      // this.$message('submit!')
      this.$message(self.$data.form.region);
      // self.form.iframe_url = 'http://127.0.0.1:5000/chartIframe?plot_type='+self.form.region+'&method='+self.form.method
      // document.getElementById('IframeHTMLInfo').src = self.form.iframe_url
      chart_json_params(self.$data.form.region, self.$data.form.method).then(
        (response) => {
          // console.log(response)
          self.$data.form.srcdoc = response.html;
          this.$message({
            message: "示例图表已获取",
            type: "success",
          });
        }
      );
    },
    onJsonChange(value) {
      // console.log('更改value:', value);
      // this.$message({
      //     message: "更改",
      //     type: 'warn'
      // })
      // 实时保存
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.$message({
        message: "保存",
        type: "warn",
      });
      this.resultInfo = value;
      this.hasJsonFlag = true;
    },
    onError(value) {
      this.$message({
        message: "json格式错误",
        type: "error",
      });
      this.hasJsonFlag = false;
    },
    // 检查json
    checkJson() {

      if (this.hasJsonFlag == false) {
        // console.log("json验证失败")
        // this.$message.error("json验证失败")
        this.$message({
          message: "json验证失败",
          type: "error",
        });
        return false;
      } else {
        // console.log("json验证成功")
        // this.$message.success("json验证成功")
        this.$message({
          message: "json验证成功",
          type: "success",
        });
        return true;
      }
    },
    fetchData() {

      // token 验证
      var self = this;
      var key = encodeURIComponent('/auth/info')
      var token = this.getCookie(key)
      getInfo(token).then(
        (response) => {
        }
      )
      
      console.log(self.$data.form.region, "example_params");
      chart_json_params(self.$data.form.region, "example_params").then(
        (response) => {
          // console.log(response);
          self.$data.resultInfo = response.data;
          this.$message({
            message: "当前图表参数获取完成",
            type: "success",
          });
        }
      );
    },
    fetchHtml() {
      // token 验证
      var self = this;
      var key = encodeURIComponent('/auth/info')
      var token = this.getCookie(key)
      getInfo(token).then(
        (response) => {
        }
      )

      // console.log(self.$data.form.region, "example_params");
      chart_json_html(
        self.$data.resultInfo.data,
        self.$data.resultInfo.set_options,
        self.$data.form.region,
        "render_html"
      ).then((response) => {
        // console.log(response);
        self.$data.form.srcdoc = response.html;
        this.$message({
          message: "当前图表生成完成",
          type: "success",
        });
      });
    },
    getCookie(name) {
      var arr;
      var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) 
        return unescape(arr[2]);
      else 
        return null; document.cookie = name + "=" + escape(value);
    },
  },
};
</script>

<style lang="scss" >
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.jsoneditor-vue {
  height: 380px;
}
</style>
